<template>
  <div class="box">
    <el-menu v-if="activeIndex" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="onSelect">
      <el-menu-item index="0">基础设置</el-menu-item>
      <el-menu-item index="1">电话条状态</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const callRouter = '/app/client'
const routeMap = new Map([
  ['0', 'client_setting'],
  ['1', 'client_state']
])
const routerMapR = new Map([
  ['client_setting', '0'],
  ['client_state', '1']
])
const state: any = reactive({
  activeIndex: '',
  cur: 'voiceNavVue'
})
const router = useRouter()
onMounted(() => {
  if (document.location.pathname === callRouter) {
    router.push('/app/client/client_setting')
    state.activeIndex = '0'
  } else {
    const name = (router.currentRoute as any)._value.name
    state.activeIndex = routerMapR.get(name)
  }
})
const onSelect = (key: any) => {
  router.push(`/app/client/${routeMap.get(key)}`)
  state.activeIndex = key
}
const { activeIndex } = toRefs(state)
</script>
<style lang="stylus" scoped>
.box
  padding: 0 24px 24px 24px;
  border-radius 10px
  :deep(.el-menu)
   height: 48px;
   margin-top: 8px;
</style>
